<template>
    <div class="comments-section">
        <div style="position: absolute;width: 100%;">
            <slot class="interact-conatiner-ineer"></slot>
        </div>
            <PrimaryCommentList
            class="comment-box"
            :article_id="article_id"
            ref="comments"
        />
      
    </div>
</template>

<script setup>
import { onMounted, ref ,defineExpose} from 'vue'
import PrimaryCommentList from './PrimaryCommentList.vue'
let comments = ref(null)
let addComment= ref(null)

defineExpose({
    addComment
})
// 接收文章 ID
const props = defineProps({
    article_id: {
        type: Number,
        required: true
    }
})
onMounted(() => { 
    addComment.value=comments.value.addComment
})
</script>

<style scoped>
.comments-section {
    width: 100%;
    max-width: 600x;
    padding: 2px;
    height: 100%;
    border-radius: 12px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    
}
.comments-section::-webkit-scrollbar{
    display: none;
}
.comment-box{
    width: 100%;
    height: calc(100% - 50px);
    margin-top: 15px;
}
</style>